<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../公用CSS文件/all.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script> 	<script type="text/javascript" src="../js/js.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        /*table{min-width:80%}*/
    </style>
</head>
<body>

<div class="dt">概述</div>
<ul>
    <div class="ltable showimg">css选择器概念</div>
    <div class="img">
        CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用于控制网页的样式和布局。
    </div>

    <div class="ltable showimg">css选择器类型</div>
    <div class="img">
        <table>
            <tr>
                <th>类型</th><th>说明</th>
            </tr>
            <tr>
                <td>行内式</td>
                <td>写在html标签内容的style属性的样式</td>
            </tr>
            <tr>
                <td>内嵌式</td>
                <td>写在style标签内部的样式，style标签一般在head标签内部</td>
            </tr>
            <tr>
                <td>链接式</td>
                <td>已link标签引入的样式，link标签一般也写在head里面</td>
            </tr>
            <tr>
                <td>导入式</td>
                <td>style标签中以@import '路径'导入的样式</td>
            </tr>
        </table>
        <li>导入式会在整个网页装载完后再装载CSS文件，这点和通常的src属性href等属性不同</li>
    </div>
</ul>

<div class="dt">CSS选择器</div>
<ul>
    <div class="ltable showimg">基础选择器</div>
    <div class="img">
        <table>
            <tr>
                <th>选择器</th><th>表示</th><th>说明</th>
            </tr>
            <tr>
                <td>id选择器</td>
                <td>#radio</td>
                <td>选择所有id属性为radio的元素，但在js类似语法中仅会选择一个</td>
            </tr>
            <tr>
                <td>class选择器</td>
                <td>.className</td>
                <td>选择所有class属性为className的元素</td>
            </tr>
            <tr>
                <td>标签选择器</td>
                <td>span</td>
                <td>选择所有span标签</td>
            </tr>
            <tr>
                <td>通配符</td>
                <td>*</td>
                <td>选择所有元素</td>
            </tr>
        </table>
    </div>

    <div class="ltable showimg">派生选择器</div>
    <div class="img">
        <table>
            <tr>
                <th>选择器</th><th>表示</th><th>说明</th>
            </tr>
            <tr>
                <td>分组选择器</td>
                <td>div,p</td>
                <td>选择所有div元素和p元素</td>
            </tr>
            <tr>
                <td>多条件选择器</td>
                <td>.btn.btn-primary</td>
                <td>选择同时拥有btn和btn-primary两个class的元素</td>
            </tr>
            <tr>
                <td>后代选择器</td>
                <td>div p</td>
                <td>选择div标签内部的p标签</td>
            </tr>
            <tr>
                <td>子元素选择器</td>
                <td>div p</td>
                <td>选择父元素为div的p标签</td>
            </tr>
            <tr>
                <td>相邻兄弟选择器</td>
                <td>div + p</td>
                <td>选择所有div标签后面紧接出现的一个p标签的同胞元素</td>
            </tr>
            <tr>
                <td>兄弟选择器</td>
                <td>div ~ p</td>
                <td>选择所有div标签后面紧接出现的所有p标签的同胞元素</td>
            </tr>
        </table>
        <li>~和+选择的元素都只选择前一个元素的下面的元素</li>
    </div>

    <div class="ltable showimg">属性选择器</div>
    <div class="img">
        <table>
            <tr>
                <th>选择器</th><th>说明</th>
            </tr>
            <tr>
                <td>[title]</td><td>选择有target属性的元素</td>
            </tr>
            <tr>
                <td>[target=right]</td><td>选择target属性为right的元素</td>
            </tr>
            <tr>
                <td>[target~=right]</td><td>选择target属性值中含right单词的元素，Jquery元素选择器不支持</td>
            </tr>
            <tr>
                <td>[target|=right]</td><td>选择target属性以right开头的元素,Jquery元素能识别"^"但无法识别同样作用的"|"</td>
            </tr>
            <tr>
                <td>[target^=right]</td><td>选择target属性以right开头的元素,Jquery元素能识别"^"但无法识别同样作用的"|"</td>
            </tr>
            <tr>
                <td>[target$=right]</td><td>选择target属性以right结尾的元素</td>
            </tr>
        </table>
        <li>属性选择器的值在Jquery中可以加引号也可以无引号，如果需要选择值中含特殊字符尤其是"[]"时，可以通过引号引用属性值的方法指定属性值</li>
    </div>

    <div class="ltable showimg">伪类选择器</div>
    <div class="img">
        <table>
            <tr>
                <th>选择器</th><th>例子</th><th>说明</th>
            </tr>
            <tr>
                <td>:first-of-type</td>
                <td>p:first-of-type</td>
                <td>选择拥有同一个父元素的第一个p元素</td>
            </tr>
            <tr>
                <td>:last-of-type</td>
                <td>p:last-of-type</td>
                <td>选择拥有同一个父元素的最后一个p元素</td>
            </tr>
            <tr>
                <td>:only-of-type</td>
                <td>p:only-of-type</td>
                <td>选择拥有同一个父元素的p元素只有一个的p元素</td>
            </tr>
            <tr>
                <td>:only-child</td>
                <td>p:only-child</td>
                <td>选择其父元素只有1个子元素的p元素</td>
            </tr>
            <tr>
                <td>:nth-child(n)</td>
                <td>p:nth-child(2)</td>
                <td>选择其为父元素的第2个子元素的p元素,n支持以n代替所有自然数的算术表达式</td>
            </tr>
            <tr>
                <td>:nth-last-child(n)</td>
                <td>p:nth-last-child(n)</td>
                <td>选择其为父元素从后计数的第2个子元素的p元素,n支持以n代替所有自然数的算术表达式</td>
            </tr>
        </table>
        <li>更完整的选择器可以查看<a href="https://www.w3school.com.cn/cssref/css_selectors.asp">W3C</a></li>
    </div>
</ul>



</body>
</html>